<form method="post" id="insertProductForm" tal:attributes="action formAction">
	<table>
		<tr tal:condition="succeedMessageExists">
			<td colspan="2" tal:content="succeedMessage"></td>
		</tr>
		<tr>
			<td>Type verpakking:</td>
			<td>
				<select id="packageTypeInput" name="packageUnitId">
					<option tal:repeat="item action/listPackageTypeIds" tal:attributes="Value item/0"><span tal:content="item/1"/></option>
				</select>
			</td>
			<td id="packageUnitIdErrorField"></td>
		</tr>
		<tr>
			<td>Naam:</td>
			<td><input type="text" size="12" maxlength="36" name="productName" id="productNameInput"/></td>
			<td id="productNameInputErrorField"></td>
		</tr>
		<tr>
			<td>Natrium / 100g:</td>
			<td><input type="text" size="12" maxlength="36" name="natrium"/></td>
			<td></td>
		</tr>
		<tr>
			<td>kCal / 100g:</td>
			<td><input type="text" size="12" maxlength="36" name="kCal"/></td>
			<td></td>
		</tr>
		<tr>
			<td colspan="2">
			<input type="submit" value="submit" name="submit"/></td>
		</tr>
	</table>
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
	$("#insertProductForm").submit(function(e){
		var validationErrorExisting = false;
		if(!validationErrorExisting && !productNameValid()){
			validationErrorExisting = true;
		}
		
		if(validationErrorExisting){
			e.preventDefault();
		}
	});
	
	function productNameValid(){
		var isValid = true;
		var id = $("#productNameInput").val();
		if(isBlank(id)){
			$("#productNameInputErrorField").text("Productnaam is verplicht");
			isValid = false;
		}
		return isValid;
	};
	
	function isBlank(str) {
		return (!str || /^\s*$/.test(str));
	}
</script>